import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

/**
 * 保持页面状态
 */
class MyApp22 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "BottomNavigationWidget",
      theme: ThemeData.light(),
      home: WrapDemo(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class WrapDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return WrapDemoState();
  }
}

class WrapDemoState extends State<WrapDemo> {
  List<Widget> list = [];

  @override
  void initState() {
    list.add(buildButton());
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    final height = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: AppBar(
        title: Text("WrapDemoState"),
      ),
      body: Center(
        child: Opacity(
          opacity: 0.8,
          child: Container(
            width: width,
            height: height / 1.5,
            color: Colors.grey,
            child: Wrap(
              children: list,
              spacing: 26.0, //设置间距
            ),
          ),
        ),
      ),
    );
  }

  //GestureDetector它式一个Widget，但没有任何的显示功能，而只是一个手势操作，用来触发事件的。
  // 虽然很多Button组件是有触发事件的，比如点击，但是也有一些组件是没有触发事件的，
  // 比如：Padding、Container、Center这时候我们想让它有触发事件就需要再它们的外层增加一个
  Widget buildButton() {
    //返回一个手势Widget，只用用于显示事件
    return GestureDetector(
      onTap: () {
        if (list.length < 12) {
          setState(() {
            list.insert(list.length - 1, buildPhoto());
          });
        }
      },
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          width: 80,
          height: 80,
          color: Colors.black54,
          child: Icon(Icons.add),
        ),
      ),
    );
  }

  Widget buildPhoto() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        width: 80.0,
        height: 80.0,
        color: Colors.deepOrangeAccent,
        child: Center(
          child: Text("PICTURE"),
        ),
      ),
    );
  }
}
